<template>
  <div class="app-container">
    <div class="left">
      <iframe
        v-if="flag==1"
        class="iframe"
        src="http://www.jq22.com/demo/jQuerySnow201711082128/"
        frameborder="0"
      ></iframe>

      <iframe
        v-if="flag==4"
        class="iframe"
        src="http://www.jq22.com/demo/html5Csss201802041853/"
        frameborder="0"
      ></iframe>

      <iframe
        v-if="flag==5"
        class="iframe"
        src="http://www.jq22.com/demo/html5Canvas201711011012/"
        frameborder="0"
      ></iframe>
      <iframe
        v-if="flag==2"
        class="iframe"
        src="http://www.jq22.com/demo/html5-hudei20151104/"
        frameborder="0"
      ></iframe>
      <iframe
        v-if="flag==3"
        class="iframe"
        src="http://www.jq22.com/demo/jquery-cloud-141217202931/"
        frameborder="0"
      ></iframe>
    </div>
    <div class="right">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>新手指导</span>
        </div>
        <div v-for="(item,index) in newList" :key="index" class="text item">
          {{item.name}}
           <!-- <el-link  type="success" style="float: right; padding: 3px 0">主要链接</el-link> -->
           <!-- http://mpingtest.ameimeika.com/api/commonDownloadFile?fileCode=10001 -->
          <a :href="http+item.url" target="_blank" style="float: right; padding: 3px 0;color:#409eff">点击查看</a>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { policy } from "@/api/policy";
import {
  getPro,
  getShopMsg,
  checkShop,
  getCate,
  getLat
} from "@/api/shopMessage";
import service from "@/utils/request1";


import Tinymce from "@/components/Tinymce";
export default {
  name: "homePage",
  data() {
    return {
      flag: 1,
      http:'https://mmkapp.oss-cn-beijing.aliyuncs.com/pdf/',
      newList: [
        {name:"创建服务操作手册",url:'商户端操作手册PDF/添加服务操作手册.pdf'},
        {name:"创建优惠券操作手册",url:'商户端操作手册PDF/添加优惠券手册.pdf'},
        {name:"创建PLUS会员卡操作手册",url:'商户端操作手册PDF/添加PLUS会员卡手册.pdf'},
        {name:"绑定银行卡操作手册",url:'商户端操作手册PDF/添加银行卡操作手册.pdf'},
        {name:"提现操作手册",url:'商户端操作手册PDF/申请提现操作手册.pdf'}
      ]
    };
  },
  components: {
    Tinymce
  },
  created() {
    this.getPolicy();
    this.tiemFn();
  },
  methods: {
    //获取签名
    getPolicy() {
      getShopMsg().then(res => {});

      let card_status = sessionStorage.getItem("card_status");
      let card_tag = sessionStorage.getItem("card_tag");
      if (card_status == 1) {
        this.$alert(card_tag, "会员卡下架提示", {
          dangerouslyUseHTMLString: true
        });
      }
    },
    //times
    tiemFn() {
      let times = parseInt(Math.random() * 10);
      if (times > 5) {
        this.flag = times - 5;
      } else {
        if (times > 0) {
          this.flag = times;
        } else {
          this.flag = 4;
        }
      }
      // console.log(times)
    }
  }
};
</script>
<style scoped>
.app-container {
  background-color: #fff;
  height: calc(100vh - 232px);
}
.iframe {
  height: calc(100vh - 232px);
  width: 100%;
  border-radius: 5px;
}
.left {
  display: block;
  width: 74%;
  height: calc(100vh - 232px);
  float: left;
}
.right {
  display: block;
  width: 25%;
  margin-left: 1%;
  background-color: #fff;
  height: calc(100vh - 232px);
  float: left;
}
.box-card {
  width: 100%;
  height: calc(100vh - 232px);
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>